<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form id="form" action="/uploadfile.php" method="post" enctype="multipart/form-data">
			<input type="text" name="b" id="" value="" />
			<input type="password" name="a" value="" />
			<input type="checkbox" name="c" id="" value="1" />
			<input type="checkbox" name="d" id="" value="2" />
			<input type="file" multiple="multiple" name="f[]" id="f" value="" /> <!--multiple="multiple"可以上传多个文件,name="f[]"以数组的形式上传-->
			<input type="button" id="btn" value="提交"/><!--用submit会跳到其他页面，
				在<form id="form" onsubmit="return false">-->
		</form>
		<script src="/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var data=[];
			$('#f').change(function(){//要上传的文件添加到data
					console.log($(this));
					var Files=$(this).get(0).files;
					for (var i=0;i<Files.length;i++) {
						data.push(Files[i])
					}
					//console.log(data);
			});
			$('#btn').click(function(){
				$('input[name=b]').val();
				$('input[name=a]').val();
				$('input[name=c]:checked').val();
				$('input[name=d]:checked').val();
				//console.log($('#form').get(0));
				return;
				
				var form=new FormData($('#form').get(0));
				for (var i in data) {//添加到FormData里
					form.append('file[]',data[i]);
				}
				
				$.ajax({
					type:"post",
					url:"/uploadfile.php",
					data:form,
					processData:false,
					contentType:false,
					success:function(mgs){
						console.log(mgs);
					},
					xhr:function(){//监听
						var http=new XMLHttpRequest();
						http.upload.addEventListener('progress',function(e){//注册上传的监听事件
							console.log('已上传了多少'+e.loaded);//单位字节
							console.log('内容的总大小'+e.total);//单位字节
						});
						return http;//一定要返回
					}
				});
			});
		</script>
	</body>
</html>
